<template>
  <div class="toolbar">
    <div class="left">
      <slot name="extra">
        {{ extra }}
      </slot>
    </div>
    <div class="right">
      <slot name="children">
        {{ children }}
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FooterToolbar',
  props: {
    extra: {
      type: String
    },
    children: {
      type: String
    }
  }
}

</script>
<style scoped>
.toolbar {
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 56px;
  line-height: 56px;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .03);
  background: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 0 24px;
  transition: all .3s;
  z-index:4;
}
.toolbar .left {
  float: left;
}
.toolbar .right {
  float: right;
}
</style>
